import {Component, OnInit, ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms';
import {Observable, of} from 'rxjs';

@Component({
  selector: 'app-template-driven',
  templateUrl: './template-driven.component.html',
  styleUrls: ['./template-driven.component.less']
})
/**
 * ng g c form/template-driven -m=form
 */
export class TemplateDrivenComponent implements OnInit {

  person: Person = new Person();
  @ViewChild('form') form: NgForm;

  constructor() { }

  ngOnInit() {
    this.form.valueChanges.subscribe(data => this.onValueChanged(data));
  }

  onValueChanged(data) {
  }

  canDeactivate(): Observable<boolean>|boolean {
    if (!this.form.dirty) {
      return true;
    }
    return of(confirm('表单信息修改后未保存，确定离开吗？'));
  }

}

export class Person {
  name: string;
  age: string;
  email: string;
  mobile: string;
  phone: string;
  salary: number;
  address: string;
  gender: Gender = new Gender();
}

export class Gender {
  male: boolean;
  female: boolean;
}
